<template>
	<view class="new-users copy-data" :style="{height:pageHeight}">
			<div class="boxbg"  :style="colorStyle"></div>
		<view class="top" :style="colorStyle">
			<!-- #ifdef MP || APP-PLUS -->
			<view class="sys-head">
				<view class="sys-bar" :style="{height:sysHeight}"></view>
				<!-- #ifdef MP -->
				<view class="sys-title" :style="member_style==3?'color:#333':''">体重数据</view>
				<!-- #endif -->
				<view class="bg"></view>
			</view>
			<!-- #endif -->
		</view>

		<view class="pd_lf--40" :style="colorStyle">

			<view class="weight_title">
				<view>数据分析</view>
				<view class="weight_add" @click="handleWeight">称重</view>
			</view>

			<view class="weight_list">
				<view class="weight_list_th">
					<view :class="{'weight_list_th_click':weight_type == 0,'weight_list_th_item':true}"
						@click="weightType(0)">列表</view>
					<view :class="{'weight_list_th_click':weight_type == 1,'weight_list_th_item':true}"
						@click="weightType(1)">BMI/气酮</view>
					<view :class="{'weight_list_th_click':weight_type == 2,'weight_list_th_item':true}"
						@click="weightType(2)">曲线</view>
				</view>
				<view class="weight_list_tr" v-if="weight_type == 0">
					<view class="wlt_tab">
						<view>日期</view>
						<view>体重kg</view>
						<view>体脂%</view>
						<view>肌肉kg</view>
					</view>
					<view class="weight_list_cont">
						<view class="wlt_content" v-for="(item,index) in list" :key="item.id" @click="handleJump(item)">
							<view style="color: #6DA2FE;">{{item.days}}</view>
							<view>{{item.weight}}<text style="font-size: 18rpx;margin-left: 8rpx;"
									:class="{'red':item.weight_c > 0,'green':item.weight_c<0}">{{item.weight_c > 0 ? '+' : ''}}{{ item.weight_c }}</text>
							</view>
							<view>{{item.tizhi}}<text style="font-size: 18rpx;margin-left: 8rpx;"
									:class="{'red':item.tizhi_c > 0,'green':item.tizhi_c<0}">{{item.tizhi_c > 0 ? '+' : ''}}{{ item.tizhi_c }}</text>
							</view>
							<view>{{item.jirou}}<text style="font-size: 18rpx;margin-left: 8rpx;"
									:class="{'red':item.jirou_c > 0,'green':item.jirou_c<0}">{{item.jirou_c > 0 ? '+' : ''}}{{ item.jirou_c }}</text>
							</view>
						</view>
					</view>
				</view>

				<view class="weight_list_tr" v-if="weight_type==1">
					<view class="wlt_tab">
						<view>日期</view>
						<view>体重kg</view>
						<view>气酮</view>
						<view>BMI</view>
					</view>
					<view class="weight_list_cont">
						<view class="wlt_content" v-for="(item,index) in list" :key="item.id">
							<view style="color: #6DA2FE;">{{item.days}}</view>
							<view>{{item.weight}}</view>
							<view>{{item.qitong}}</view>
							<view class="span">
								<text :class="item.bmiClass">{{item.bmiTxt}}</text>{{item.bmi}}
							</view>
						</view>
					</view>
				</view>

				<view class="weight_list_tr" v-if="weight_type==2">
					<l-echart style="width: 100%; height:260px; background-color: #fff;" ref="chart"
						@finished="init"></l-echart>
					<view class="weight_selprev">
						<view class="weight_selprev_click" v-if="page == 1" style="margin-right: 22rpx;">上一页</view>
						<view style="margin-right: 22rpx;" v-else @click="weight_page(0)" >上一页</view>
						<view class="weight_selprev_click" v-if="page * 5 > total" >下一页</view>
						<view  v-else @click="weight_page(1)">下一页</view>
					</view>
				</view>
			</view>
		</view>
		<tabBar v-if="!is_diy" :pagePath="'/pages/weight/index'"></tabBar>
		<pageFooter v-else></pageFooter>
	</view>
</template>

<script>
	let sysHeight = uni.getSystemInfoSync().statusBarHeight + 'px';
	const app = getApp();
	import LEchart from "@/pages/weight/lime-echart/components/l-echart/l-echart.vue";
	import * as echarts from "@/pages/weight/lime-echart/static/echarts.min.js";
	import colors from '@/mixins/color';
	import tabBar from "@/pages/index/visualization/components/tabBar.vue";
	import pageFooter from '@/components/pageFooter/index.vue'
	import {
		mapState,
		mapGetters
	} from "vuex";
	import {getList} from "@/api/bmi.js";
	export default {
		name: "index",
		data() {
			return {
				// #ifdef H5 || MP
				pageHeight: '100%',
				routineContact: 0,
				// #endif
				is_diy: uni.getStorageSync('is_diy'),
				weight_type: 0,
				    total: 0,
				    page: 1,
				time_arr: [],
				data_arr: [],
				tizhi_arr: [],
				jirou_arr: [],
				qitong_arr: [],
				list: [],
				user_height: ' ',
				user_age: ' ',
				sysHeight: sysHeight,
				option: {},
				newData:{}
			}
		},
		components: {
			tabBar,
			pageFooter,LEchart
		},
		computed: {
			...mapGetters({
				isLogin: 'isLogin',
				configData: state => state.app.pageFooter,
			})
		},
		watch: {
			configData: {
				handler(nVal, oVal) {
					let self = this
					const query = uni.createSelectorQuery().in(this);
					this.newData = nVal

				},
				deep: true
			},
		},
		mixins: [colors],
		onLoad(option) {
			uni.hideTabBar()
			let that = this;
			// #ifdef MP
			// 小程序静默授权
			if (!this.$store.getters.isLogin) {

			}
			// #endif
			let routes = getCurrentPages(); // 获取当前打开过的页面路由数组
			let curRoute = routes[routes.length - 1].route //获取当前页面路由
			this.activeRouter = '/' + curRoute
			this.getCopyRight();
		},
		onReady() {
			let self = this
			// #ifdef MP
			let info = uni.createSelectorQuery().select(".sys-head");
			info.boundingClientRect(function(data) { //data - 各种参数
				self.mpHeight = data.height
			}).exec()
			// #endif
		},
		onShow: function() {
			let that = this;
			this.getCopyRight();
			this.getList()

		},
		onPullDownRefresh() {
			this.onLoadFun();
		},
		methods: {
			  //点击上一周下一周
			  weight_page(type) {
			    if (type == 1) {
			      if (this.page * 1 < this.total) {
			         this.page =  this.page + 1;
			      }
			    } else {
			      if ( this.page > 1) {
			         this.page--;
			      }
			    }
				this.getList()
			  },
			init() {
				this.$refs.chart.init(echarts, chart => {
					chart.setOption(this.option);
				});
			},
			getList() {

				getList(this.page,'30').then((res) => {
					// this.user_height = Number(data.m_height);
					// this.user_age = Number(data.m_age);
					let list = res.data.list
					this.time_arr = [];
					this.data_arr = [],
					this.tizhi_arr = [],
					this.qitong_arr = [],
					this.jirou_arr = [];
					list.map(item => {
						this.time_arr.push(item.days);
						this.data_arr.push(item.bmi);
						this.tizhi_arr.push(item.tizhi);
						this.qitong_arr.push(item.qitong);
						this.jirou_arr.push(item.jirou);
						item.bmiTxt = '偏瘦'
						item.bmiClass = 'text0'
						if (item.bmi < 24 && item.bmi > 18.4) {
							item.bmiTxt = '正常'
							item.bmiClass = 'text1'
						} else if (item.bmi > 23.9 && item.bmi < 28) {
							item.bmiTxt = '过重'
							item.bmiClass = 'text2'
						} else if (item.bmi > 28) {
							item.bmiTxt = '肥胖'
							item.bmiClass = 'text3'
						}
					})

					this.list = list;
					this.total = res.data.sum;
					if (this.time_arr.length == 0) {
						for (var i = 6; i >= 0; i--) {
							var sjc = new Date() / 1000 - i * 86400;
							var ymd = this.formatTimeTwo(sjc, "M-D");
							this.time_arr.push(ymd);
						}
						for (var i = 0; i < 7; i++) {
							this.data_arr.push(0);
						}
					}
					this.option = {
						legend: {
							data: ['BMI', '体脂', '气酮', '肌肉']
						},
						xAxis: {
							type: 'category',
							data: this.time_arr
						},
						yAxis: {
							title: "",
							format: function(val) {
								return val.toFixed(2);
							},
							min: 0,
						},
						series: [{
								name: 'BMI',
								type: 'line',
								data: this.data_arr,
								itemStyle: {
									normal: {
										label: {
											show: true // 在折线拐点上显示数据
										},
									}
								},
							},
							{
								name: '体脂',
								type: 'line',
								data: this.tizhi_arr,
								itemStyle: {
									normal: {
										label: {
											show: true // 在折线拐点上显示数据
										},
									}
								},
							},
							{
								name: '气酮',
								type: 'line',
								data: this.qitong_arr,
								itemStyle: {
									normal: {
										label: {
											show: true // 在折线拐点上显示数据
										},
									}
								},
							},
							{
								name: '肌肉',
								type: 'line',
								data: this.jirou_arr,
								itemStyle: {
									normal: {
										label: {
											show: true // 在折线拐点上显示数据
										},
									}
								},
							},
						]
					}
					this.$refs.chart.init(echarts, chart => {
						chart.setOption(this.option);
					});
				});

			},
			formatTimeTwo(number, format) {
				var formateArr = ["Y", "M", "D", "h", "m", "s"];
				var returnArr = [];
				var date = new Date(number * 1000);
				returnArr.push(date.getFullYear());
				returnArr.push(this.formatNumber(date.getMonth() + 1));
				returnArr.push(this.formatNumber(date.getDate()));

				returnArr.push(this.formatNumber(date.getHours()));
				returnArr.push(this.formatNumber(date.getMinutes()));
				returnArr.push(this.formatNumber(date.getSeconds()));

				for (var i in returnArr) {
					format = format.replace(formateArr[i], returnArr[i]);
				}
				return format;
			},
			formatNumber: function(n) {
				n = n.toString();
				return n[1] ? n : "0" + n;
			},
			handleWeight() {
				uni.navigateTo({
					url: `/pages/weights/weight`
				})
			},

			//点击tab切换
			weightType(type) {
				this.weight_type = type
			},
			handleJump(item) {
				let {id,weight,dianzu} = item
				uni.navigateTo({
					url: `/pages/weights/result?id=${id}&weight=${weight}&dianzu=${dianzu}`
				})
			},
			getCopyRight() {
				const copyRight = uni.getStorageSync('copyRight')
				if (copyRight.copyrightImage) {
					this.copyRightPic = copyRight.copyrightImage
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.boxbg {
		background-size: 100% auto;
		background-color: var(--view-theme);
		position: absolute;
		top: 0;
		left: 0;
		right: 0;
		height: 350rpx;
    z-index: -1;
	}

	.pd_lf--40 {
		padding: 0 40rpx;
		box-sizing: border-box;
		// background-image: url("~@/static/images/user01.png");
	}

	.page_card {
		box-shadow: 0px 1px 46px 0px rgba(136, 142, 163, 0.33);
		border-radius: 24rpx;
		background: #fff;
		padding: 28rpx 10rpx 32rpx;
		box-sizing: border-box;
		overflow: hidden;
		margin-top: 10rpx;
	}

	.page_canvas {
		width: 100%;
		height: 400rpx;
		padding-right: 20rpx;
		box-sizing: border-box;
	}

	.canvas {
		height: 100%;
		width: 100%;
	}

	.weight_comment {
		display: flex;
		align-items: center;
		width: 554rpx;
		height: 70rpx;
		background: #E7F1FF;
		border-radius: 35rpx;
		margin: 20rpx auto 36rpx;
		padding: 0 10rpx;
		box-sizing: border-box;
	}

	.comment_item {
		flex: 1;
		align-items: center;
		justify-content: center;
		display: flex;
	}

	.comment_item--dot {
		width: 16rpx;
		height: 16rpx;
		border-radius: 50%;
		margin-right: 10rpx;
	}

	.comment_item--text {
		font-size: 22rpx;
		color: #333333;
	}

	.weight_title {
		height: 100rpx;
		text-align: center;
		box-sizing: border-box;
		font-size: 40rpx;
		line-height: 100rpx;
		font-weight: bold;
		color: #fff;
		position: relative;
	}

	.weight_add {
		position: absolute;
		right: 0;
		top: 50%;
		transform: translateY(-50%);
		font-size: 28rpx;
		height: 64rpx;
		width: 160rpx;
		border-radius: 32rpx;
		box-sizing: border-box;
		background-color: #fff;
		border: 2rpx solid #fff;
		color:  var(--view-theme);
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.weight_selprev {
		display: flex;
		align-items: center;
		justify-content: center;
		padding-bottom: 50rpx;

	}

	.weight_selprev view {
		width: 180rpx;
		height: 68rpx;
		border-radius: 34rpx;
		border: 1rpx solid #6586F9;
		box-sizing: border-box;
		font-size: 24rpx;
		font-weight: bold;
		color: #6DA2FE;
		display: flex;
		align-items: center;
		justify-content: center;
	}

	view.weight_selprev_click {
		border: 1px solid #ccc;
		color: #ccc;
	}

	.weight_list {
		margin-top: 24rpx;
		box-shadow: 0px 1px 46px 0px rgba(136, 142, 163, 0.33);
		border-radius: 24rpx;
		background-color: #fff;
		font-size: 14px;
		padding-bottom: 30rpx;
		
	}

	.weight_list_th {
		display: flex;
		align-items: center;
		height: 100rpx;
	}

	.weight_list_th_item {
		flex: 1;
		font-size: 28rpx;
		color: #222222;
	}
	.weight_list_th_click {
		font-size: 32rpx;
		font-weight: bold;
		position: relative;
		color:  var(--view-theme)!important;
	}

	.weight_list_th_click::after {
		content: '';
		display: block;
		position: absolute;
		bottom: 16rpx;
		left: 50%;
		transform: translateX(-50%);
		border-radius: 3rpx;
		height: 6rpx;
		width: 44rpx;
		background-color: var(--view-theme);
	}

	.weight_list_th view {
		flex: 1;
		line-height: 100rpx;
		height: 100%;
		text-align: center;
		box-sizing: border-box;
	}
	.weight_list_cont{
		height:calc(100vh - 600rpx);
		overflow-y:auto;
	}

	.wlt_tab {
		display: flex;
		background: #F0F6FF;
	}

	.wlt_tab view {
		flex: 1;
		color: #333;
		font-weight: 24rpx;
		font-weight: bold;
		text-align: center;
		padding: 10px;
		box-sizing: border-box;
	}

	.wlt_content {
		display: flex;
		align-items: center;
		height: 80rpx;

		.span {
			>text {
				display: inline-block;
				color: #fff;
				padding: 3px 6px;
				margin-right: 5px;
				border-radius: 5px;
			}

			.text0 {
				background: #6fc1f5;
			}

			.text1 {
				background: #00e5b9;
			}

			.text2 {
				background: #ffe400;
			}

			.text3 {
				background: #ff9900;
			}
		}
	}

	.wlt_content view {
		flex: 1;
		text-align: center;
		font-size: 24rpx;
		color: #222222;
	}

	/* 弹窗表单 */
	.weight_pop {
		position: fixed;
		left: 0;
		right: 0;
		bottom: 0;
		top: 0;
		z-index: 9999;
	}

	.weight_pop_bg {
		width: 100%;
		height: 100%;
		background-color: #000;
		opacity: 0.6;
	}

	.weight_pop_form {
		position: absolute;
		left: 10%;
		top: 20%;
		right: 10%;
		background-color: #fff;
		border-radius: 5px;
	}

	.weight_pop_title {
		padding: 10px;
		text-align: center;
		width: 100%;
		box-sizing: border-box;
		border-bottom: 1px solid #eee;
		position: relative;
	}

	.wpt_exit {
		position: absolute;
		right: 10px;
		top: 10px;
		font-size: 36rpx;
	}

	.wpc_list {
		padding: 10px 15px 5px;
		border-bottom: 1px solid #eee;
		font-size: 28rpx;
	}

	.wpc_list view {
		padding-bottom: 5px;
	}

	.wpc_list input {
		border: 1px solid #00e5b9;
		padding: 5px;
		border-radius: 5px;
	}

	.wpc_button {
		padding: 10px 15px;
		margin-top: 60rpx;
	}

	.wpc_button button {
		background-color: #00e5b9;
		color: #fff;
		border: none;
		font-size: 32rpx;
	}

	.green {
		color: green;
	}

	.red {
		color: red;
	}

	.new-users {
		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);

		.sys-head {
			position: relative;
			width: 100%;

			.bg {
				position: absolute;
				left: 0;
				top: 0;
				width: 100%;
				height: 100%;
				background: var(--view-theme);
				background-size: 100% auto;
				background-position: left bottom;
			}

			.sys-title {
				z-index: 10;
				position: relative;
				height: 43px;
				text-align: center;
				line-height: 43px;
				font-size: 36rpx;
				color: #FFFFFF;
			}
		}
	}
</style>
